(function(){
  window.AreaScroller = {
    el: null,
    data: {
      province: null,
      city: null,
      district: null,
      provinceName: null,
      cityName: null,
      districtName: null,
      provinces: [],
      cities: [],
      districts: []
    },
    set province (value) {
      this.data.province = value;
      var provinces = this.data.provinces;
      for (var i = 0; i < provinces.length; i++) {
        if (provinces[i].district_id === value) {
          this.data.provinceName = provinces[i].name;
          break;
        }
      }
      this.setTitles();
    },
    set city (value) {
      this.data.city = value;
      var cities = this.data.cities;
      for (var i = 0; i < cities.length; i++) {
        if (cities[i].district_id === value) {
          this.data.cityName = cities[i].name;
          break;
        }
      }
      this.setTitles();
    },
    set district (value) {
      this.data.district = value;
      var districts = this.data.districts;
      for (var i = 0; i < this.data.districts.length; i++) {
        if (districts[i].district_id === value) {
          this.data.districtName = districts[i].name;
          break;
        }
      }
      this.setTitles();
    },
    set provinces(value) {
      this.data.provinces = value;
      this.province = this.data.provinces[0].district_id;
      this.renderList('provinces');
    },
    set cities(value) {
      this.data.cities = value;
      this.city = this.data.cities[0].district_id;
      this.renderList('cities');
    },
    set districts(value) {
      this.data.districts = value;
      this.district = this.data.districts[0].district_id;
      this.renderList('districts');
    },
    option: {
      bindedElement: null
    },
    template: '<div class="board">\
          <div class="areas-title">\
          </div>\
          <div class="area-groups">\
            <ul class="provinces">\
            </ul>\
            <ul class="cities">\
            </ul>\
            <ul class="districts">\
            </ul>\
          </div>\
          <div class="btn-group"><button class="confirm">确定</button><button class="cancel">取消</button></div>\
        </div>',
    init: function (option) {
      this.option = Object.assign(this.option, option);
      this.render();
      this.getAreaData('provinces');
      this.bindEvent();
    },
    show: function() {
      this.el.className = 'area-scroller show';
    },
    hide: function() {
      this.el.className = 'area-scroller hide';
    },
    render: function() {
      var fragment = document.createDocumentFragment();
      var str = this.template;
      this.el = document.createElement('div');
      this.el.setAttribute('class', 'area-scroller hide');
      this.el.innerHTML = str;
      // str = str.replace(/\{\{(.+)\}\}/g, this.data['$1']);
      fragment.appendChild(this.el);
      document.querySelector('body').appendChild(fragment);
    },
    renderList: function (type) {
      var listEle = this.el.querySelector('.' + type);
      var str = '';
      listEle.innerHTML = '';
      listEle.scrollTop = 0;
      this.data[type].forEach(function(item, index){
        var li = document.createElement('li');
        li.idx = item.district_id;
        if (index === 0) {
          li.className = 'active'
        }
        li.innerHTML = item.name;
        listEle.appendChild(li);
      })
    },
    setTitles: function() {
      var this_ = this;
      var template = '<span>{{provinceName}}</span><span>{{cityName}}</span><span>{{districtName}}</span>';
      var keys = template.match(/\{\{[a-zA-Z0-9_]+\}\}/g);
      keys.forEach(function(key){
        key = key.replace(/[{}]+/g, '');
        var reg = new RegExp('\\{\\{' + key + '\\}\\}', 'g');
        template = template.replace(reg, this_.data[key]);
      })
      this.el.querySelector('.areas-title').innerHTML = template;
    },
    getAreaData: function (type, parentId) {
      var apiPath;
      var this_ = this;
      switch (type) {
        case 'provinces': apiPath = 'address_province'; break;
        case 'cities': apiPath = 'address_city'; break;
        case 'districts': apiPath = 'address_district'; break;
      }
      var data = {};
      if (type === 'cities') {
        data.provinceId = parentId;
      }
      if (type === 'districts') {
        data.cityId = parentId;
      }
      $.ajax({
        url: '/proxy/Register/' + apiPath,
        type: 'post',
        data: data,
        success: function (data) {
          if (data.code === '00') {
            this_[type] = data.data;
            if (type === 'provinces') {
              this_.getAreaData('cities', this_.data[type][0].district_id);
            }
            if (type === 'cities') {
              this_.getAreaData('districts', this_.data[type][0].district_id);
            }
          }
        }
      })
    },
    bindEvent: function() {
      var this_ = this;
      this.el.querySelector('.provinces').addEventListener('click', function(e){
        var el = e.target;
        this_.el.querySelectorAll('.provinces li').forEach(function(item){
          item.className = '';
        })
        el.className = 'active';
        this_.province = el.idx
        this_.getAreaData('cities', el.idx)
      })
      this.el.querySelector('.cities').addEventListener('click', function(e){
        var el = e.target;
        this_.el.querySelectorAll('.cities li').forEach(function(item){
          item.className = '';
        })
        el.className = 'active';
        this_.city = el.idx
        this_.getAreaData('districts', el.idx)
      })
      this.el.querySelector('.districts').addEventListener('click', function(e){
        var el = e.target;
        this_.el.querySelectorAll('.districts li').forEach(function(item){
          item.className = '';
        })
        el.className = 'active';
        this_.district = el.idx
      })
      this.el.querySelector('.confirm').addEventListener('click', function(e){
        this_.option.bindedElement.setAttribute('areaid', this_.data.province + ';' + this_.data.city + ';' + this_.data.district);
        this_.option.bindedElement.value = this_.data.provinceName + ' ' + this_.data.cityName + ' ' + this_.data.districtName;
        this_.hide();
      })
      this.el.querySelector('.cancel').addEventListener('click', function(e){
        this_.hide();
      })
      this.option.bindedElement.addEventListener('click', function(e){
        this_.show();
      })
    }
  }
})(window)
